<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="../../img/icons/icon-48x48.png"/>
    <title>线程池监控平台</title>
    <script type="text/javascript" src="../../js/utils.js"></script>
    <script type="text/javascript" src="../../js/constants.js"></script>
    <script type="text/javascript" src="../../js/axios.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link href="../../css/app.css" rel="stylesheet">
</head>
<style>
    .el-tooltip__popper {
        max-width: 800px;
        font-size: 14px;
    }

    a[class="sidebar-brand"] {
        color: #666666;
    }

    a[class="sidebar-link"] {
        background-color: white;
        color: #666666;
    }

    a[class="sidebar-link"]:hover {
        background-color: rgba(141, 141, 141, 0.87);
        color: white;
    }

    .active {
        background-color: rgba(141, 141, 141, 0.87);
        color: white;
    }
</style>
<body>
<div class="wrapper" id="app">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar" style="background-color: white;">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">线程池监控平台</span>
            </a>

            <ul class="sidebar-nav">
                <li class="sidebar-item">
                    <a data-target="#ui" data-toggle="collapse" class="sidebar-link collapsed"
                       style="background-color: white;color: #666666;">
                        <i class="align-middle mr-2" data-feather="eye" style="color:#666666;"></i>
                        <span class="align-middle">动态线程池监控</span>
                    </a>
                    <ul id="ui" class="list-unstyled" data-parent="#sidebar">
                        <li class="sidebar-item">
                            <a class="sidebar-link" href="threadpool_realtime.html">
                                <i class="align-middle" data-feather="monitor"
                                   style="margin-left: 20px;color:#666666;"></i>
                                实时报告
                            </a>
                        </li>
                        <li class="sidebar-item align-middle active">
                            <a class="sidebar-link" href="threadpool_total.html">
                                <!--       data-feather 属性表示图标                          -->
                                <i class="align-middle" data-feather="list" style="margin-left: 20px;color:white;"></i>
                                业务线程池汇总
                            </a>
                        </li>
                        <li class="sidebar-item align-middle">
                            <a class="sidebar-link" href="threadpool_history.html">
                                <!--       data-feather 属性表示图标                          -->
                                <i class="align-middle" data-feather="bell"
                                   style="margin-left: 20px;color:#666666;"></i>
                                任务执行记录
                            </a>
                        </li>
                        <li class="sidebar-item align-middle">
                            <a class="sidebar-link" href="threadpool_alarm.html">
                                <!--       data-feather 属性表示图标                          -->
                                <i class="align-middle" data-feather="clock"
                                   style="margin-left: 20px;color:#666666;"></i>
                                线程池告警配置
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <div class="main">
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>
            <li class="nav-item dropdown" style="position: relative;left: 90%;list-style: none;">
                <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                    <i class="align-middle" data-feather="settings"></i>
                </a>

                <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown">
                    <img src="../../img/avatars/admin.jpg" class="avatar img-fluid rounded mr-1" alt="Charles Hall"/>
                    <span class="text-dark">admin</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" onclick="logout()">注销</a>
                </div>
            </li>
        </nav>

        <main class="content">
            <div class="container-fluid p-0">

                <h4 class="h4 mb-3">线程池配置管理</h4>


                <div class="row">
                    <div class="col-12 col-xl-12">
                        <div>
                            <el-select filterable style="width:270px;margin-bottom: 20px;"
                                       v-model="reqArg.applicationName"
                                       :filter-method="serviceFilter"
                                       placeholder="后端服务名称">
                                <el-option
                                        v-for="item in matchServiceNameList"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>

                            <el-button type="primary" @click="queryByApplicationName" icon="el-icon-search"
                                       style="margin-left: 20px;">
                                应用查询
                            </el-button>
                            <br>
                            <br>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <b></b>
                                </h5>
                                <template>
                                    <el-table
                                            :data="threadPoolDetailInfo"
                                            border
                                        >
                                        <el-table-column
                                                prop="applicationAddress"
                                                label="应用地址"
                                                align="center"
                                                width="150">
                                            <template slot-scope="scope">
                                                <span>{{scope.row.ip}}:{{scope.row.port}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="poolName"
                                                label="线程池名称"
                                                align="center"
                                                width="150">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.keepAliveTime"
                                                label="存活时间"
                                                align="center"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.corePoolSize"
                                                label="核心数"
                                                align="center"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.activePoolSize"
                                                label="活跃线程数"
                                                align="center"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.maximumPoolSize"
                                                label="最大核心数"
                                                align="center"
                                                width="150">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.queueCapacity"
                                                label="队列容量"
                                                align="center"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.taskCountScoreThreshold"
                                                label="任务告警阈值"
                                                align="center"
                                                width="150">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.rejectedExecutionType"
                                                label="拒绝策略"
                                                align="center"
                                                width="150">
                                        </el-table-column>
                                        <el-table-column
                                                prop="threadPoolDetail.taskCountScoreThreshold"
                                                label="告警阈值"
                                                align="center"
                                                width="150">
                                        </el-table-column>
                                    </el-table>
                                </template>
                                <h6 class="card-subtitle text-muted">
                                </h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <footer class="footer">
            <div class="container-fluid">
                <div class="row text-muted">
                    <div class="col-6 text-left">
                        <p class="mb-0">
                            <a href="threadpool_detail.html" class="text-muted"><strong></strong></a> &copy;
                        </p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>

<script src="../../js/app.js"></script>
<!-- 先引入 Vue -->
<script src="../../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../js/index.js"></script>
<script src="../../js/threadpool/threadpool_total.js"></script>
</body>

</html>